<template>
  <view class="content">
    <u-sticky style="background: #fff;">
      <topbar title='流程图' :userInfo="userInfo" @success="successHandel" :mindMapType="false" :showAddFile="true" />
      <u-tabs :current="current" :list="list" lineWidth="30" lineColor="#4C75FF" :scrollable="false" :activeStyle="{
        color: '#4C75FF'
      }" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;" @change="changeHandel" />

    </u-sticky>

    <swiper class="swiper" :current="current" @animationfinish="animationfinish">
      <swiper-item class="swiper-item" v-for="(item, index) in list" :key="index">

        <scroll-view style="height: 100%;" scroll-y="true" class="scroll-Y">

          <u-cell-group>
            <view v-for="(item2, index2) in swiperList" :key="index2">

              <u-cell size="large" :title="item2.name" :label="item2.createTime" @click.stop="deteleHandel(item2)">
                <!-- <u-icon slot="icon" size="40" :name="item2.type === 1 ? 'file-text' : 'grid-fill'"
                  color="#4C75FF"></u-icon> -->

                <u-icon slot="icon" size="40"
                  :custom-prefix="item2.type === 1 ? 'custom-icon-wj custom-icon' : 'custom-icon-wenjianjia custom-icon'"
                  color="#4C75FF"></u-icon>

                <view slot="value" @click.stop="moreHandel(item2)">
                  <u-icon slot="icon" size="20" name="more-dot-fill" color="#4C75FF"></u-icon>
                </view>
              </u-cell>

            </view>

          </u-cell-group>

          <u-empty v-if="swiperList.lenght == 0" mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png"
            text="暂时没有数据" textSize="18" />

        </scroll-view>




      </swiper-item>
    </swiper>

    <!-- <u-empty marginTop="100" icon="http://cdn.uviewui.com/uview/empty/permission.png" text="您还未登录，登录后享受更多精彩~"
      :show="!isLogin" textColor="#191F25" textSize="18">
      <slot>
        <u-button type="primary" text="登录" @click="loginHandel()"></u-button>
      </slot>

    </u-empty> -->

    <u-popup :show="show" @close="close" :customStyle="popupStyle">
      <view class="file_name">{{ fileObj.name }}</view>
      <view class="menu">

        <!-- <u-icon v-if="showShare" name="share-square" color="#4C75FF" size="35" label="协作/分享" labelPos="bottom" open-type="share"></u-icon> -->
        <button open-type="share" v-if="showShare && queryType != 'DELETE'">
          <u-icon name="share-square" color="#4C75FF" size="35" label="协作/分享" labelPos="bottom"></u-icon>
        </button>


        <u-icon name="share" v-if="!teamStatus" color="#4C75FF" size="35" label="转存" labelPos="bottom"
          @click="zhuancunModel"></u-icon>

        <u-icon v-else name="eye" color="#4C75FF" size="35" label="预览" labelPos="bottom" @click="preview"></u-icon>



        <u-icon name="edit-pen" color="#4C75FF" size="35" label="重命名" labelPos="bottom" @click="rename"></u-icon>

        <u-icon v-if="showMove && queryType != 'DELETE'" name="cut" color="#4C75FF" size="35" label="移动"
          labelPos="bottom" @click="moveHandel"></u-icon>

        <u-icon v-if="queryType != 'DELETE'" name="trash" color="#4C75FF" size="35" label="删除" labelPos="bottom"
          @click="delHadel"></u-icon>


        <u-icon v-else name="reload" color="#4C75FF" size="35" label="还原" labelPos="bottom"
          @click="reductionHandel"></u-icon>


        <u-icon v-if="queryType == 'DELETE'" name="trash" color="#4C75FF" size="35" label="彻底删除" labelPos="bottom"
          @click="comDelHanldel"></u-icon>

      </view>
    </u-popup>





    <u-modal :show="showModal" title="修改文件名" @cancel="cancel" @confirm="confirm" :showCancelButton="true">
      <view class="slot-content">
        <u--input placeholder="请输入文件名称" border="surround" v-model="fileName"></u--input>
      </view>
    </u-modal>


    <u-modal :show="zhuancunModelShow" title="选择转存团队" :showCancelButton="true" @cancel="zhuancunModelShow = false"
      @confirm="zhauncunConfirm">

      <u--form labelPosition="left" :model="model" labelWidth="80" ref="uForm">
        <u-form-item label="团队" prop="zhuancunTeam" borderBottom @click="zhauncunpicker = true;" ref="item1">
          <u--input v-model="zhuancunTeam" disabled disabledColor="#ffffff" placeholder="请选择模板"
            border="none"></u--input>
        </u-form-item>
      </u--form>

      <u-picker :show="zhauncunpicker" ref="uPicker" @cancel="zhauncunCancel" @confirm="zcConfirm" :columns="zcColumns"
        @change="zhuancunChange" keyName="creatorName"></u-picker>


    </u-modal>


    <u-modal :show="comDel" title="确定是否彻底删除？" @confirm="delConfirm" @cancel="delCancel" :showCancelButton="true"
      :closeOnClickOverlay="true"></u-modal>


    <u-modal :show="moveModal" title="选择文件夹" @cancel="moveCancel" @confirm="moveConfirm" :showCancelButton="true">
      <view class="slot-content">
        <u--form labelPosition="left" :model="folderName" labelWidth="80" ref="uForm">


          <u-form-item label="目标文件夹" prop="folderName" borderBottom ref="item" @click="treepickerShow">
            <u--input v-model="folderName" disabled disabledColor="#ffffff" border="none"></u--input>
          </u-form-item>

        </u--form>

        <!-- <u-picker :show="pickerShow" ref="uPicker" @cancel="pickerCancel" @confirm="pickerConfirm" :columns="columns"
          @change="changeHandler" keyName="name" /> -->

        <!-- <treepicker ref="treePicker" :multiple='false' @select-change="selectChange" title="选择文件夹" :localdata="columns"
          valueKey="folderId" textKey="name" childrenKey="children"></treepicker> -->

        <mytreepicker ref="treePicker" :multiple="false" :range="columns" :foldAll="true" rangeKey="name"
          idKey="folderId" @confirm="treeConfirm" @cancel="treeCancel" :selectParent="true"></mytreepicker>
      </view>
    </u-modal>




    <u-toast ref="uToast"></u-toast>
  </view>
</template>

<script>
import { getUserInfo, getUserFileList, deleteFile, saveFileData, getFolder, delFolder, upDataFolder, reductionFile, reductionFolder, compdelfolder, compdelfile, transfer } from '@/api/api'
import { mapState, mapMutations } from 'vuex'
export default {
  data() {
    return {
      list: [
        {
          name: '全部',
          label: 'NORMAL'
        }, {
          name: '最近',
          label: 'RECENT'
        }, {
          name: '回收站',
          label: 'DELETE'
        }],
      columns: [],
      showShare: true,
      showEye: true,
      showMove: true,
      moveModal: false,
      pickerShow: false,
      comDel: false,
      zhuancunModelShow: false,
      zhauncunpicker: false,
      zhuancunTeam: "",
      zhuancunId: "",
      folderName: "",
      current: 0,
      swiperList: [],
      zcColumns: [[]],
      userInfo: {},
      queryType: "NORMAL",
      show: false,
      fileName: '',
      fileObj: {},
      showModal: false,
      rules: {
        "folderName": {
          type: 'string',
          required: true,
          message: '请选择文件夹',
          trigger: ['blur', 'change']
        },
      },
    };
  },
  computed: {
    ...mapState(['teamStatus', "currentTeamId", "teamList"])
  },
  onShow() {
    getUserInfo().then(res => {
      this.userInfo = res.data
    })
    this.getList({ queryType: this.queryType, folderId: 0 })
    this.current = 0
    this.setFolderId("0")
    this.getTeamList()
  },
  onShareAppMessage() {
    return {
      title: `分享文件：${this.fileObj.name}`,
      path: `/pages/index/detail/detail?fileId=${this.fileObj.fileId}`
    }
  },
  methods: {
    ...mapMutations([
      "personHandel", "teamHandel", "setFolderId", "getTeamList"
    ]),

    treeCancel() {
      this.$refs.treePicker._hide()
    },
    treepickerShow() {
      this.$refs.treePicker._show()
    },
    comDelHanldel() {
      this.comDel = true
      this.show = false
    },
    zhuancunModel() {
      this.zhuancunModelShow = true
      this.teamList.forEach(e => {
        if (e.role != 'MEMBER') {
          this.zcColumns[0].push(e)
        }
      })
    },
    zhauncunCancel() {
      this.zhauncunpicker = false
      this.zhuancunModelShow = false
      this.show = false
      this.zcColumns = [[]]
      this.zhuancunTeam = ""
      this.zhuancunTeam = ""
    },
    zcConfirm(e) {
      this.zhuancunTeam = e.value[0].creatorName
      this.zhuancunId = e.value[0].teamId
      this.zhauncunpicker = false
    },
    zhauncunConfirm() {
      transfer({ fileId: this.fileObj.fileId, teamId: this.zhuancunId }).then(res => {
        if (res.code == 200) {
          this.zhauncunCancel()
          this.$refs.uToast.show({
            type: 'success',
            message: "转存成功",
          })
        } else {
          this.zhauncunCancel()
          this.$refs.uToast.show({
            type: 'error',
            message: "转存失败",
          })
        }
      })
    },
    zhuancunChange(e) {
      console.log(e.value[0])
      this.zhuancunTeam = e.value[0].creatorName
      this.zhuancunId = e.value[0].teamId
    },
    delConfirm() {
      if (this.fileObj.type === 1) {
        compdelfile(this.fileObj.fileId).then(res => {
          if (res.code == 200) {
            this.$refs.uToast.show({
              type: 'success',
              message: "删除成功",
            })
            this.getList({ queryType: this.queryType })
            this.comDel = false
          }
        })
      } else {
        compdelfolder(this.fileObj.folderId).then(res => {
          this.$refs.uToast.show({
            type: 'success',
            message: "删除成功",
          })
          this.getList({ queryType: this.queryType, teamId: this.currentTeamId })
          this.comDel = false
        })
      }
    },
    delCancel() {
      this.comDel = false
    },
    moveHandel() {
      this.moveModal = true
      this.show = false
      if (!this.teamStatus) {
        getFolder().then(res => {
          this.columns = res.data
        })
      } else {
        getFolder({ teamId: this.userInfo.teamId }).then(res => {
          this.columns = res.data
        })
      }
    },

    treeConfirm(e) {
      this.folderName = e[e.length - 1].name
      this.fileObj.folderId = e[e.length - 1].folderId
    },

    moveConfirm() {
      saveFileData(this.fileObj).then(res => {
        if (res.code === 200) {
          this.moveModal = false
          this.$refs.uToast.show({
            type: 'success',
            message: "移动成功",
          })
          this.fileObj = {}
          this.folderName = ''
          this.getList({ queryType: this.queryType })
        }
      })
    },

    moveCancel() {
      this.moveModal = false
      this.folderName = ''
    },
    changeHandler(e) {
      this.folderName = e.values[0][e.indexs[0]].name
    },
    pickerCancel() {
      this.pickerShow = false
      this.folderName = ''
    },
    pickerConfirm(e) {
      this.fileObj.folderId = e.values[0][e.indexs[0]].folderId
      this.folderName = e.values[0][e.indexs[0]].name
      this.pickerShow = false
    },
    loginHandel() {
      uni.navigateTo({
        url: '/pages/login/login'
      });
    },
    changeHandel(item) {
      this.current = item.index
      this.queryType = item.label
      this.getList({ queryType: item.label })
    },
    animationfinish(e) {
      this.current = e.detail.current
      this.queryType = this.list[e.detail.current].label
      this.getList({ queryType: this.list[e.detail.current].label })
    },
    deteleHandel(e) {
      console.log(e)
      if (e.type === 1) {
        uni.navigateTo({
          url: `/pages/index/detail/detail?fileId=${e.fileId}`,
        });
      } else {
        uni.navigateTo({
          url: '/pages/index/folder/folder?item=' + encodeURIComponent(JSON.stringify(e))
        });

      }
    },
    getList(args) {
      if (this.currentTeamId != null) {
        args.teamId = this.currentTeamId
        getUserFileList(args).then(res => {
          this.swiperList = res.data.rows
        })
      } else {
        getUserFileList(args).then(res => {
          this.swiperList = res.data.rows
        })
      }
    },
    moreHandel(e) {
      if (e.type === 1) {
        this.showShare = true
        this.showEye = true
        this.showMove = true
        this.fileObj = e
        this.show = true
      } else {
        this.showShare = false
        this.showEye = false
        this.showMove = false
        this.fileObj = e
        this.show = true
      }
    },
    preview() {
      uni.navigateTo({
        url: `/pages/index/detail/detail?fileId=${this.fileObj.fileId}`,
      });
      this.show = false
    },
    close() {
      this.show = false
    },
    reductionHandel() {
      // 个人
      if (this.fileObj.type == 1) {
        reductionFile(this.fileObj.fileId).then(res => {
          this.show = false
          this.$refs.uToast.show({
            type: 'success',
            message: "还原成功～",
          })
          this.successHandel()
        })
      } else {
        // 团队
        reductionFolder(this.fileObj.folderId).then(res => {
          this.show = false
          this.$refs.uToast.show({
            type: 'success',
            message: "还原成功～",
          })
          this.successHandel()
        })
      }
    },
    delHadel() {
      // 个人
      if (this.fileObj.type == 1) {
        deleteFile(this.fileObj.fileId).then(res => {
          this.show = false
          this.$refs.uToast.show({
            type: 'success',
            message: "删除成功～",
          })
          this.successHandel()
        })
      } else {
        // 团队
        delFolder(this.fileObj.folderId).then(res => {
          this.show = false
          this.$refs.uToast.show({
            type: 'success',
            message: "删除成功～",
          })
          this.successHandel()
        })
      }

    },
    cancel() {
      this.showModal = false
      this.show = false
    },
    confirm(e) {
      this.fileObj.name = this.fileName
      if (this.fileObj.type == 1) {
        saveFileData(this.fileObj).then(res => {
          if (res.code === 200) {
            this.showModal = false
            this.show = false
            this.$refs.uToast.show({
              type: 'success',
              message: "修改成功～",
            })
            this.fileName = ''
            this.fileObj = {}
            this.successHandel()
          }
        })
      } else {
        upDataFolder(this.fileObj).then(res => {
          if (res.code === 200) {
            this.showModal = false
            this.show = false
            this.$refs.uToast.show({
              type: 'success',
              message: "修改成功～",
            })
            this.fileName = ''
            this.fileObj = {}
            this.successHandel()
          }
        })
      }
    },
    rename() {
      this.showModal = true
      this.show = false
    },
    reduction() {

    },
    successHandel() {
      if (!this.teamStatus) {
        this.getList({ queryType: this.queryType })
      } else {
        this.getList({ queryType: this.queryType, teamId: this.currentTeamId })
      }
    },
  }
};
</script>

<style lang="scss" scoped>
button {
  background-color: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  cursor: pointer;
  outline: none;
}

button::after {
  border: none;
}

button {
  background-color: #fff;
}

.swiper {
  height: 87.8vh;

}

.swiper-item {
  height: 100%;
}

::v-deep .u-button {
  margin-top: 50rpx;
  width: 200px !important;
  border-radius: 50rpx !important;
  background-color: #4C75FF !important;

  .u-button__text {
    font-size: 18px !important;
  }
}

.menu {
  display: flex;
  justify-content: space-around;
  margin-bottom: 30rpx;
}

.file_name {
  font-size: 40rpx;
  font-weight: 400;
  color: #636363;
  padding: 50rpx 0 0 50rpx;
  margin: 20rpx 0;
}

.slot-content {
  width: 100%;
}
</style>